<template>
  <div class="orderDialog">
    <ContentWrap v-loading="isLoading" :style="styleStr">
      <div class="closeIcon" title="关闭" @click="resetDialog">
        <i class="el-icon-close" />
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="订单信息" name="orderInfo">
          <order-info-detail v-if="activeName === 'orderInfo' && Object.keys(orderDetail).length" :order-detail="orderDetail" :cheight="sizeinfo.height" />
        </el-tab-pane>
        <el-tab-pane label="商品信息" name="goodsInfo">
          <goods-detail v-if="activeName === 'goodsInfo'" :order-goods="orderGoods" :cheight="sizeinfo.height" />
        </el-tab-pane>
        <el-tab-pane label="产品信息" name="productInfo">
          <product-detail v-if="activeName === 'productInfo'" :order-product="orderProduct" :cheight="sizeinfo.height" />
        </el-tab-pane>
        <el-tab-pane label="关联订单" name="relationOrder">
          <relation-detail v-if="activeName === 'relationOrder'" :order-link="orderLink" :cheight="sizeinfo.height" />
        </el-tab-pane>
        <el-tab-pane label="操作日志" name="logs">
          <logs-detail v-if="activeName === 'logs'" :order-id="orderInfo.id" :order-log="orderLog" :cheight="sizeinfo.height" />
        </el-tab-pane>
        <el-tab-pane label="备注信息" name="remark">
          <remark-detail v-if="activeName === 'remark'" :order-remark="orderRemark" :cheight="sizeinfo.height" />
        </el-tab-pane>
        <el-tab-pane label="订单跟踪" name="orderTrack">
          <order-track-detail v-if="activeName === 'orderTrack'" :order-track="orderTrack" :order-id="orderInfo.id" :cheight="sizeinfo.height" />
        </el-tab-pane>
      </el-tabs>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import orderInfoDetail from './orderInfoDetail'
import goodsDetail from './goodsDetail'
import productDetail from './productDetail'
import relationDetail from './relationDetail'
import logsDetail from './logsDetail'
import remarkDetail from './remarkDetail'
import orderTrackDetail from './orderTrackDetail'
import { parseTime } from '@/utils/'
import { getOrderDetail } from '@/api/mscInfo'
export default {
  components: {
    ContentWrap,
    orderInfoDetail,
    goodsDetail,
    productDetail,
    relationDetail,
    logsDetail,
    remarkDetail,
    orderTrackDetail
  },
  props: {
    sizeinfo: {
      type: Object,
      default: () => ({})
    },
    orderInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      isLoading: false,
      visible: false,
      styleStr: '',
      activeName: 'orderInfo',
      orderDetail: {},
      orderLog: [],
      orderLink: [],
      orderGoods: [],
      orderProduct: [],
      orderTrack: [],
      orderRemark: []
    }
  },
  watch: {
    toggle(newVal, oldVal) {
      this.visible = newVal
    },
    sizeinfo: {
      handler(newval, oldVal) {
        this.styleStr = `width: ${newval.width}px; height: ${newval.height}px`
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getOrderInfoDetail(this.orderInfo.id)
  },
  mounted() {},
  methods: {
    /**
     * 获取订单详细
     */
    getOrderInfoDetail(id) {
      this.isLoading = true
      getOrderDetail(id).then(async(res) => {
        if (res.success === 1) {
          const { orderLog, orderGoods, orderProduct, orderTrack, orderLink, commentList } = res.data
          const orderDetail = { ...res.data }
          orderDetail.logisticsMode = await this.$getDictValue('LOGISTICSMODE', orderDetail.logisticsMode)
          orderDetail.serviceMode = await this.$getDictValue('SERVICEMODE', orderDetail.serviceMode)
          const billtxt = await this.$getDictValue('PLATFORMBILLSTATUS', orderDetail.platformBillStatus)
          orderDetail.platformBillStatus = billtxt
          orderDetail.orderType = await this.$getDictValue('ORDERTYPE', orderDetail.orderType)
          orderDetail.orderSource = await this.$getDictValue('ORDERSOURCE', orderDetail.orderSource)
          orderDetail.isLock = await this.$getDictValue('ISLOCK', orderDetail.isLock)
          orderDetail.adjustStatus = await this.$getDictValue('ADJUSTSTATUS', orderDetail.adjustStatus)
          orderDetail.sendStatus = await this.$getDictValue('SENDSTATUS', orderDetail.sendStatus)
          orderDetail.billStatus = await this.$getDictValue('MSC_ORDER_STATUS', orderDetail.billStatus)
          orderDetail.settleStatus = await this.$getDictValue('BTOC_ACCOUNT_STATUS', orderDetail.settleStatus)
          orderDetail.signStatus = await this.$getDictValue('RECIEVE_STATUS', orderDetail.signStatus)

          orderDetail.auditTime = parseTime(orderDetail.auditTime)

          orderLink.forEach(list => {
            list.creationTime = parseTime(list.creationTime)
          })
          const promStatus = Number(orderDetail.promStatus)
          orderDetail.promStatus = promStatus === 0 ? '未处理' : promStatus === 1 ? '已处理' : promStatus === 2 ? '已人工关闭' : '--'
          this.orderDetail = orderDetail
          this.orderGoods = orderGoods
          this.orderLog = orderLog
          this.orderProduct = orderProduct
          this.orderTrack = orderTrack
          this.orderLink = orderLink
          this.orderRemark = commentList
          this.$nextTick(() => {
            this.isLoading = false
          })
        }
      })
    },
    /**
     * 关闭Dialog时执行操作
     */
    resetDialog() {
      this.visible = false
      this.activeName = 'orderInfo'
      this.$emit('modelClose')
      // this.$refs.searchForm.resetFields()
      // this.$refs.detailTable.initTableData()
    },
    /**
     * tabs标签页切换
     */
    handleClick(tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.orderDialog {
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
  z-index: 50;
  .closeIcon {
    position: absolute;
    right: 15px;
    top: 20px;
    font-size: 14px;
    cursor: pointer;
    z-index: 1000;
  }
  .content-wrap {
    widows: 100%;
    height: 100%;
    background: #FFFFFF;
  }
}
</style>
